<template>
    <view class="page-wrap">
        <scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
            <view class="list-item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
                <image class="cover" :src="item.cover"></image>
                <view class="title text-cut">{{item.title}}</view>
                <view class="info">
                    <view class="time text-cut">
                        <u-icon name="clock-fill" :color="color['ico-color']" size="28"></u-icon>
                        {{item.activityStart}} ~ {{item.activityEnd}}
                    </view>
                    <view class="address text-cut">
                        <u-icon name="map-fill" :color="color['ico-color']" size="28"></u-icon>
                        {{item.activityAddress}}
                    </view>
                </view>
            </view>
        </scroll-list>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                list: [],
                option: {
                    size: 15, // 分页大小
                    auto: true // 自动加载列表
                },
            };
        },
        methods: {
            // 加载数据
            load(paging) {
                this.$api.activity.page({
                    ...paging,
                }).then(res => {
                    console.log('notice', res)
                    this.list = this.list.concat(res.list);
                    // 加载成功
                    this.$refs.list.loadSuccess({
                        list: this.list,
                        total: res.total
                    });
                })
            },
            // 刷新刷剧
            refresh(paging) {
                this.$api.activity.page({
                    ...paging,
                }).then(res => {
                    console.log('notice', res)
                    this.list = res.list;
                    // 加载成功
                    this.$refs.list.refreshSuccess({
                        list: this.list,
                        total: res.total
                    });
                })
            },
            toDetail(id) {
                this.$toPage({
                    url: '/pages/activity/detail?id=' + id
                });
            },
        },
        watch: {},
        onLoad(option) {},
        onShow() {},
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style scoped lang="scss">
    $ico-color: #666;

    .page-wrap {
        background: #fff;
        padding: 0 32rpx;

        .list-item {
            font-size: 32rpx;
            border-radius: 32rpx;
            overflow: hidden;
            box-shadow: 0 2rpx 10rpx #ccc;

            .cover {
                width: 686rpx;
                height: 329rpx;
            }

            .title {
                font-weight: bold;
                padding: 0 6rpx 10rpx #ccc;
            }

            .info {
                padding: 0 32rpx 32rpx;

                .address,
                .time {
                    min-width: 200rpx;
                    font-size: 24rpx;
                    color: #666;
                    padding-top: 16rpx;

                    ::v-deep .u-icon {
                        display: inline-block;
                        margin-right: 0.5em;
                    }
                }
            }
        }
    }
</style>